<template>
  <div>
<!--    <a-button type="primary" @click="showModal"></a-button>-->
    <a-modal v-model:open="open" title="Title" @ok="handleOk">
      <template #footer>
        <a-button key="back" @click="handleCancel">返回</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">提交</a-button>
      </template>
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="用户id"
          name="UserId"
        >
          <a-input v-model:value="formState.userId" />
        </a-form-item>

        <a-form-item
          label="分数"
          name="Score"
        >
          <a-input v-model:value="formState.score" />
        </a-form-item>
        <a-form-item
          label="操作类型"
          name="type"
        >
          <a-select :options="operations" v-model:value="formState.type" />
        </a-form-item>
        <a-form-item
          label="原因"
          name="Reason"
        >
          <a-input v-model:value="formState.reason" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const loading = ref<boolean>(false);
const open = ref<boolean>(false);
import { defineExpose } from "vue";
import { addOrDecreaseScoreUsingPost, updateScoreUsingPost } from '@/api/scoreController.ts'
import { message } from 'ant-design-vue'

interface Props {
  req?: string
  loading?: boolean
  fetchData:() => void
  flag?:boolean;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
})
const operations=[{label:'加分',value:'加分'},{label:'减分',value:'减分'}]
const formState=ref<API.AddOrDecreaseScoreRequest>({

})

const onFinish=async ()=>{
return
}

const onFinishFailed=()=>{
  return
}

const showModal = () => {
  open.value = true;
};

const handleOk = async () => {
  loading.value = true;
  console.log('props.req的值是:', props.req, typeof props.req);
  if(props.req && !isNaN(Number(props.req))){
    console.log('update')
    const res= await updateScoreUsingPost({
      ...formState.value,
      id: String(props.req)
    })
    loading.value=true;
    if(res.data.code===0&&res.data.data){
      message.success('操作成功');
    } else {
      message.error('操作失败' + res.data.message);
    }
  }else {
    console.log('add')
    const res=await addOrDecreaseScoreUsingPost({
      ...formState.value,
    })
    loading.value=true;
    if(res.data.code===0&&res.data.data){
      message.success('操作成功');
    } else {
      message.error('操作失败' + res.data.message);
    }
  }
  props.fetchData()
  setTimeout(() => {
    loading.value = false;
    open.value = false;
  }, 2000);
};

const handleCancel = () => {
  open.value = false;
};


// 暴露函数给父组件
defineExpose({
  showModal,
});


</script>

<style scoped>
</style>
